<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Title</title>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/audio.js"></script>
</head>
<body>
<div style="width: 100px; height: 100px; background: url(images/play.gif) center no-repeat"></div>
<!--<button id="click1">点击我</button>-->
<!--<div class="click" style="height: 100px">-->
    <!--&lt;!&ndash;<audio class="audio" load="media" controls="controls">&ndash;&gt;-->
    <!--&lt;!&ndash;<source src="" type="audio/mpeg" />&ndash;&gt;-->
    <!--&lt;!&ndash;</audio>&ndash;&gt;-->
<!--</div>-->
<!--<div class="click" style="height: 100px">-->
    <!--&lt;!&ndash;<audio class="audio" load="media" controls="controls">&ndash;&gt;-->
    <!--&lt;!&ndash;<source src="" type="audio/mpeg" />&ndash;&gt;-->
    <!--&lt;!&ndash;</audio>&ndash;&gt;-->
<!--</div>-->
<!--<div class="click" style="height: 100px">-->
    <!--&lt;!&ndash;<audio class="audio" id="audio"  controls="controls">&ndash;&gt;-->
    <!--&lt;!&ndash;<source src="" type="audio/mpeg" />&ndash;&gt;-->
    <!--&lt;!&ndash;</audio>&ndash;&gt;-->
<!--</div>-->

<div id="edit" contentEditable style="width: 30px"></div>
<button id="bold">加粗</button>
</body>
<script>



    $("#bold").click(function () {
        var bold = document.execCommand("bold", false, null);
    });








//    var timeout = setTimeout(function () {
//
//    },2)
//    clearTimeout(timeout)
//    console.log(Object.prototype.toString.call(timeout).toLowerCase());
//    // 定义最后光标对象
//    var edit = document.getElementById("edit"),
//        lastEditRange,
//        isbold = false,         //是否加粗
//        _length = 0,            //最初长度
//        curpoint = 0,           //当前位置
//        curHtml = "",           //当前html
//        prehtml = "",           //当前点之前html
//        prohtml = "",           //当前点之后html
//        _html = "";
//
//    // 编辑框点击事件
//    document.getElementById('edit').onclick = function() {
//        curHtml = $("#edit").html();
//        _length = curHtml.length;
//        // 获取选定对象
//        var selection= getSelection();
//        lastEditRange = selection.getRangeAt(0);
//        curpoint = lastEditRange.startOffset;
//        prehtml = curHtml.substring(0,curpoint);
//        prohtml = curHtml.substr(curpoint);
//        if(isbold){
//
//        }
//
//    };
//
//    // 编辑框按键弹起事件
//    document.getElementById('edit').onkeyup = function() {
//
//        curHtml = $("#edit").html().replace(/\<b\>|\<\/b\>/gim,"");
//        var newLength = curHtml.length;
//        var addWord = curHtml.substr(curpoint,newLength - _length);
//        var selection= getSelection();
//
//        // 获取选定对象
//        lastEditRange = selection.getRangeAt(0);
//
//
//        if(isbold){
//            _html = prehtml + '<b>'+addWord+'</b>' + prohtml;
//            $("#edit").html("").html(_html);
//            // 设置最后光标对象
//            if(_html.length>4){
//                lastEditRange.setStart(edit,4);
//
//            }
//        }else{
//            _html = curHtml;
//            $("#edit").html("").html(_html);
//        }
//
//
//    };
//
//    $("#bold").click(function () {
//        // 设置最后光标对象
//        isbold = !isbold;
//        console.log($("#edit").html().length);
//    })

</script>
<!--<script>-->
    <!--$(function () {-->
        <!--$.ajax({-->
            <!--url: "data.json",-->
            <!--success: function (res) {-->
                <!--$.each(res, function (index, obj) {-->
                    <!--$("body").append('<div class="click" style="height=100px"></div>');-->
                    <!--var music = new APlayer({-->
                        <!--ele: document.querySelectorAll(".click")[index],-->
                        <!--audioProp: {-->
                            <!--title: '给我一个理由忘记',-->
                            <!--loop: true,-->
                            <!--src: obj,-->
                            <!--controls: "controls"-->
                        <!--},-->
                        <!--audioEvt: {-->
                            <!--loadeddata:function () {-->
                                <!--alert(223);-->
                            <!--},-->
                            <!--canplay: function (e) {-->
                                <!--console.log(e.srcElement.duration);-->
                            <!--},-->
                            <!--timeupdate: function () {-->
                                <!--$('.currentTime').html(this.timeFormat(this.audio.currentTime));-->
                            <!--}-->
                        <!--}-->

                    <!--});-->

<!--//                $($(".audio")[index]).find("source").attr("src",obj);-->
                <!--});-->
            <!--}-->
        <!--});-->
    <!--})-->


    <!--//    document.querySelector("#audio").addEventListener("canplay",function () {-->
    <!--//        console.log($("#audio")[0].duration);-->
    <!--//    },false);-->
    <!--//    function getTime(obj,i) {-->
    <!--//        console.log($(obj).find("source").attr("src"));-->
    <!--//        setTimeout(function () {-->
    <!--//            var duration =obj.duration;-->
    <!--//            if(isNaN(duration)){-->
    <!--//                getTime(obj,i);-->
    <!--//            }-->
    <!--//            else{-->
    <!--//                console.info("该歌曲的总时间为："+obj.duration+"秒")-->
    <!--//            }-->
    <!--//        }, i * 10);-->
    <!--//    }-->
    <!--//-->
    <!--//    $(function () {-->
    <!--//        for(let i = 0; i< $(".audio").length; i++){-->
    <!--//            getTime($(".audio")[i],i);-->
    <!--//        }-->
    <!--//    });-->


    <!--//    $(function () {-->
    <!--//        console.log($(".audio"));-->
    <!--//    });-->

    <!--//    var audio = document.querySelector("#audio");-->
    <!--$(".click").click(function () {-->
        <!--console.log($(".audio")[0].duration);-->
        <!--var _index = $(this).index();-->
        <!--$(".audio")[0].pause();-->
        <!--var audio = $(this).find(".audio")[0],-->
            <!--duration = audio.duration,-->
            <!--currentTime = audio.currentTime;-->

        <!--console.log(currentTime);-->
        <!--if (currentTime == 0) {-->
            <!--audio.play();-->
        <!--} else if (currentTime == duration) {-->
            <!--audio.load();-->
            <!--audio.play();-->
        <!--} else {-->
            <!--console.log(ispause)-->
            <!--if (ispause) {-->
                <!--audio.play();-->
            <!--} else {-->
                <!--audio.pause();-->
            <!--}-->
            <!--ispause = !ispause;-->
        <!--}-->


    <!--})-->
<!--</script>-->
</html>